<template>
	<view>
		<Navbar bgc="" color="#fff" bbtn="true" v-show="true">我的财报</Navbar>
		<view class="top">
			<view class="tab">
				<text :class="{'active':pageFlag == 1}" @click.stop="pageTab(1)">店铺</text>
				<text :class="{'active':pageFlag == 2}" @click.stop="pageTab(2)">团队</text>
			</view>
			<view class="month">
				<image @click.stop="prevMonth()" src="../../static/logo.png" mode=""></image>
				<text @click.stop="prevMonth()">{{tMonth==1?tYear-1:tYear}}年{{tMonth==1?12:tMonth-1}}月</text>
				<text class="on">{{tYear}}年{{tMonth}}月</text>
				<text @click.stop="nextMonth()">{{tMonth==12?tYear+1:tYear}}年{{tMonth==12?1:tMonth+1}}月</text>
				<image @click.stop="nextMonth()" src="../../static/logo.png" mode=""></image>
			</view>
		</view>
		<view class="financialDetail">
			<view>
				<text>{{allData.back}}</text></br>
				<text>本月店铺返佣（元）</text>
			</view>
			<view>
				<text>{{allData.amount}}</text></br>
				<text>本月店铺营业额（元）</text>
			</view>
			<view class="tips">
				如发生退单，则返佣和营业额对应扣减
			</view>
		</view>
		<view class="record" v-for="(item,index) in allData.current">
			<view>
				<text>{{item.date.substring(5,7)}}月{{item.date.substring(8,10)}}日</text><text>{{item.order_amount}}元</text><text>{{item.amount}}元</text>
			</view>
			<view>
				<text>{{item.date.substring(0,4)}}</text><text>营业额</text><text>返佣</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Navbar from "../../components/nav-bar.vue"
	export default {
		components:{
			Navbar
		},
		data() {
			return {
			
				pageFlag:1,
				allData:{},
				tYear:'',
				tMonth:''
			}
		},
		methods: {
			pageTab:function(index){
				this.pageFlag = index;
				this.getData();
			},
			getData:function(){
				let _this = this
			    
				let param = {
					"token":this.token,
					"type":this.pageFlag,
					"date":this.tYear+"-"+(this.tMonth<10?"0"+this.tMonth:this.tMonth)
				}
				this.ajaxJson('myWealth',param,function(data){
					console.log(data);
					_this.allData = data
				})
			},
			setMonth:function(){
				    let myDate = new Date();
				    this.tYear = myDate.getFullYear();
				    this.tMonth = myDate.getMonth()+1;

			},
			prevMonth:function(){
				if(this.tMonth==1){
					this.tMonth = 12;
					this.tYear--;
				}else{
					this.tMonth--
				}
				this.getData()
			},
			nextMonth:function(){
				if(this.tMonth==12){
					this.tMonth = 1;
					this.tYear++;
				}else{
					this.tMonth++
				}
				this.getData()
			}
		},
		onLoad:function(){
			this.getData();
			this.setMonth()
		}
	}
</script>

<style scoped>
   .top{
   	   background-color: #FF9972;
   	   height: 8rem;
   	   padding: 3rem 0 0;
   }
   .tab{
	   color: #FFCDBD;
	   padding: 0 5%;
   }
   .tab text{
	   display: inline-block;
	   margin-right: 1rem;
   }
   .active{
	   font-size: 1.6rem;
	   color: #fff;
   }
   .month image{
	   width: 5%;
	   height: 100%;
   }
   .month{
	  height: 1.6rem;
	  padding: 0 4%;
	  margin: 1rem 0;
   }
   .month text{
	   display: inline-block;
	   width: 30%;
	   color: #fff;
	   font-size: 0.75rem;
	   text-align: center;
	   position: relative;
	   top: -0.25rem;
   }
   .on{
	   font-size: 0.9rem !important;
	   font-weight: bold;
   }
   .financialDetail{
	   position: relative;
	   width: 92%;
   	   box-shadow: 0 5px 10px 0 #eee;
   	   height: 7rem;
   	   margin: 1rem 4% 0 ;
   	   border-radius: 5px;
	   font-size: 0.75rem;
	   top: -3rem;
	   background-color:#FFFFFF;
   }
   .financialDetail view{
   	   text-align: center;
   	   height:4rem;
   	   width: 50%;
   	   display: inline-block;
   	   line-height: 2rem;
   	   padding: 0.25rem 0;
   }
   .financialDetail view text:first-child{
   	   font-weight: bold;
	   color: #FD6431;
   }
   .financialDetail view text:nth-child(3){
   	   color: 4E5366;
   }
   .financialDetail .tips{
	   width: 100%;
	   color: #CACAD1;
   }
   .record{
	   position: relative;
	   top: -2rem;
	   padding: 0  0 0 10%;
	   font-size: 0.8rem;
	   margin-bottom: 0.5rem;
	   
   }
   .record text{
	   display: inline-block;
	   width: 33.3333%;
	   line-height: 1.5rem;
	   
   }
   .record view:first-child{
	   font-weight: bold;
   }
   .record view:nth-child(2){
   	   color: #aaa;
   }
</style>
